<!-- 瀑布流 -->
<script setup lang="ts">
import { MediaType } from '@/types/enums'

defineProps<{
  list: Photo[]
}>()

defineEmits(['tapPhoto'])
</script>

<template>
  <view class="columns-2 gap-x-25rpx">
    <div
      v-for="(media, index) in list"
      :key="media.image"
      class="relative"
    >
      <image
        class="mb-16rpx w-full rounded-20rpx bg-#F8F8F8"
        mode="widthFix"
        :src="media.type.toString() === MediaType.image ? media.image : media.cover"
        @tap="$emit('tapPhoto', { index, media })"
      />
      <image
        v-if="media.type.toString() === MediaType.video"
        class="absolute left-1/2 top-1/2 h-30rpx w-27rpx -translate-1/2"
        src="@/static/images/play.png"
      />
    </div>
  </view>
</template>
